<%@ page import="cn.hutool.core.date.DateTime" %><%--
  Created by IntelliJ IDEA.
  User: 陌灬
  Date: 2022/11/29
  Time: 17:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html >
<head>
    <title>Title</title>
    <%@include file="../common.jsp"%>
</head>
<body style="background: #e0dbd6;">

    <%--logo--%>
    <div class="layui-logo layuimini-logo"></div>

    <%--轮播图--%>
    <div id="test10" class="layui-carousel" style="top:3%; left: 3%; overflow: hidden; border-radius: 8%; background: #63534d;" >
        <div carousel-item="" style="position: relative; background: #63534d;">
            <div style="background: #e4d5cd;"><img src="${data.photo1}" style=" position: absolute;  left: 50%; top: 50%; transform: translate(-50%,-50%); width:80%;"></div>
            <div style="background: #e4d5cd;"><img src="${data.photo2}" style=" position: absolute;  left: 50%; top: 50%; transform: translate(-50%,-50%); width:80%;"></div>
            <div style="background: #e4d5cd;"><img src="${data.photo3}" style=" position: absolute;  left: 50%; top: 50%; transform: translate(-50%,-50%); width:80%;"></div>
            <div style="background: #e4d5cd;"><img src="${data.photo4}" style=" position: absolute;  left: 50%; top: 50%; transform: translate(-50%,-50%); width:80%;"></div>
        </div>
    </div>

    <%--详情页面右侧布局--%>
    <div>
    <%--详情页宠物信息表单--%>
    <form class="layui-form" action="" style=" background:#e4d5cd; color:#c6ab89; position:absolute; float: left; left: 65%; top: 6%; width:30%; font-size: 16px; border-radius: 8%; ">
        <div class="layui-form-item" style="float: left;">
            <label class="layui-form-label" style="">宠物编号：</label>
            <input type="text" id="id" name="username" value="${data.id}" readonly=""
                   style="border:none; border-bottom:1px solid #ccc; background: transparent;
                   width: 100px;height: 30px;text-align: center ">
        </div>

        <div class="layui-form-item" style="float: left;">
            <label class="layui-form-label">宠物名称：</label>
            <input type="text" id="name" name="username" value="${data.name}" readonly=""
                   style="border:none; border-bottom:1px solid #ccc; background: transparent;
                   width: 100px;height: 30px;text-align: center ">
        </div>
        <div class="layui-form-item" style="float: left;">
            <label class="layui-form-label">宠物性别：</label>

            <c:if test="${data.sex==1}">
                <input type="text" id="sex" name="username" value="公" readonly=""
                       style="border:none; border-bottom:1px solid #ccc; background: transparent;
                   width: 100px;height: 30px;text-align: center ">
            </c:if>
            <c:if test="${data.sex==2}">
                <input type="text" id="sex" name="username" value="母" readonly=""
                       style="border:none; border-bottom:1px solid #ccc; background: transparent;
                   width: 100px;height: 30px;text-align: center ">
            </c:if>

        </div>
        <div class="layui-form-item" style="float: left;">
            <label class="layui-form-label">宠物年龄：</label>
            <input type="text" id="age" name="username" value="${data.age}" readonly=""
                   style="border:none; border-bottom:1px solid #ccc; background: transparent;
                   width: 100px;height: 30px;text-align: center ">
        </div>
        <input type="hidden" name="type" value="${type}" id="p1">

    </form>

    <%--分割线--%>
    <div style="border: 1px solid darkgrey;background: darkgrey;
         position:absolute; width: 32%;float: left;left: 64%; top: 53%;
         border-radius: 20%;"></div>

    <%--认养按钮--%>
    <div class="layui-btn-container" style="position: absolute; float: left; left: 75%; top: 55%">
        <button type="button" id="adopt" class="layui-btn layui-btn-warm layui-btn-lg layui-btn-primary layui-btn-radius">认&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;养</button>
    </div>

    <%--宠物介绍信息卡片面板--%>
    <div class="layui-bg-gray" style="background:#e4d5cd; position:absolute; padding-top: 5px; left:65%; top: 67%;width: 30%; height: 25%">
        <div class="layui-row layui-col-space15" style="background:#e4d5cd; ">
            <div class="layui-col-md6" style="width: 100%" >
                <div class="layui-card" style="background:#e4d5cd">
                    <div class="layui-card-header" style="color:#c6ab89;" >宠物介绍</div>
                    <div class="layui-card-body" style="height: 65%">
                        ${data.tip}
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
<script>

    //轮播图设置
    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;
        carousel.render({
            elem: '#test10'
            ,width: '60%'
            ,height: '100%'
            // ,autoplay:'false'
            ,interval: 3000
            ,anim: 'fade'
            ,indicator:'inside'
            ,arrow:'always'
        });
    });

    //监听认养按钮
    $("#adopt").click(function (){
        <%
        String time=DateTime.now().toString("yyyy-MM-dd-hh:mm:ss");
        %>
        $.ajax({
            "url": base_url + "record/add.do",
            "data": {
                "petId": ${data.id},
                "petName":'${data.name}',
                "adopterId":<%=session.getAttribute("userLoginId")%>,
                "adopterName":'<%=session.getAttribute("userLoginName")%>',
                "adopTime":'<%=time%>',
                "type":${type},
            },
            "method": "post",
            success: function (e) {
                console.log(e.data)
                if(e.code === "0"){
                    layer.alert("认养成功",function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                        window.parent.location.reload();
                    });
                }else if (e.code === "3"){
                    layer.alert("请先登录！",function () {
                        window.parent.parent.location=base_url+"/pages/front/userlogin.jsp";
                    });
                }else{
                    layer.alert("认养失败");
                }
            },
            error: function () {
                layer.alert("数据异常！");
            }
        });

    })

</script>
</body>
</html>
